/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Brand Colors
\* -------------------------------------------------------------- */

@use "sass:math";

$global-color_vanillaBlue: #0291db;
$global-color_pink: #d0021b;
$global-color_grey: #555a62;
$global-color_whitesmoke: #bcbec1;

$global-color_black: #000;
$global-color_white: #fff;
$global-color_transparent: transparent;

/* -------------------------------------------------------------- *\
    Utility Variables
\* -------------------------------------------------------------- */

$utility-baseUnit: 6px;
$utility-baseUnitHalf: $utility-baseUnit * 0.5; // Derived
$utility-baseUnitDouble: $utility-baseUnit * 2; // Derived
$utility-baseUnitTriple: $utility-baseUnit * 3; // Derived
$utility-percentage_third: math.div(100%, 3);
$utility-percentage_nineSixteenths: (math.div(9, 16) * 100%);
$utility-SVGEncoding: "data:image/svg+xml,";

/* -------------------------------------------------------------- *\
    Global Font
\* -------------------------------------------------------------- */

$global-normal_fontWeight: 400 !default;
$global-semibold_fontWeight: 600 !default;
$global-bold_fontWeight: 700 !default;

$global-heading_fontFamily: "Open Sans", HelveticaNeue-Light, "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial,
    sans-serif !default;
$global-heading_fontWeight: $global-bold_fontWeight !default;

$global-body_fontFamily: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Raleway, Arial, sans-serif !default;
$global-body_fontWeight: $global-normal_fontWeight !default;

$global-large_fontSize: 16px !default;
$global-medium_fontSize: 14px !default;
$global-small_fontSize: 12px !default;

$global-title_fontSize: 32px !default;
$global-smallTitle_fontSize: 20px !default;
$global-title_mobile_fontSize: 26px !default;
$global-subTitle_fontSize: 18px !default;

$global-base_lineHeight: 1.5 !default;
$global-condensed_lineHeight: 1.25 !default;

/* -------------------------------------------------------------- *\
    User Content
\* -------------------------------------------------------------- */

$userContent_fontSize: $global-medium_fontSize !default; // 14 for forums, but 16 for KB

$userContent-fontSizeH1: 2em !default;
$userContent-fontSizeH2: 1.5em !default;
$userContent-fontSizeH3: 1.25em !default;
$userContent-fontSizeH4: 1em !default;
$userContent-fontSizeH5: 0.875em !default;
$userContent-fontSizeH6: 0.85em !default;

/* -------------------------------------------------------------- *\
    Global Overwrites
\* -------------------------------------------------------------- */

$global-heading_topMargin: 1.5 * $global-medium_fontSize;
$global-block_margin: $userContent_fontSize !default;

$global_spacer: $userContent_fontSize * $global-base_lineHeight !default;
$global-default_timing: 0.35s !default;

$global-color_primary: $global-color_vanillaBlue !default;
$global-color_primaryAlt: darken($global-color_primary, 8%) !default;
$global-color_secondary: $global-color_pink !default;

$global-color_bg: $global-color_white !default;
$global-color_fg: $global-color_grey !default; // text color | should have high contrast between $global-color_bg

$global-border_color: mix(
    $global-color_fg,
    $global-color_bg,
    24%
) !default; // Note it's off by default due to the border width
$global-border-width: 1px;
$global-border-style: solid;
$global_borderRadius: 6px !default;

$global-body_bg: $global-color_bg !default;

$link-default_color: $global-color_primary !default;
$link-default-hover_color: $global-color_primary !default;
$link-default_visited_color: $global-color_primary !default;

/* -------------------------------------------------------------- *\
    Theme Colors
\* -------------------------------------------------------------- */

$theme-border_color: mix($global-color_fg, $global-color_bg, 24%) !default;
$theme-hover_color: mix($global-color_fg, $global-color_bg, 6%) !default;

$theme-link-hover_textDecoration: none !default;

$theme-heading_color: $global-color_primary !default;
$theme-heading-hover_color: $global-color_primary !default;

/* -------------------------------------------------------------- *\
    Buttons Colors
\* -------------------------------------------------------------- */

$button-basic_fg: $global-color_grey !default;
$button-basic_bg: transparent !default;
$button-basic_border: $global-color_whitesmoke !default;

$button-basic-hover_fg: $global-color_primary !default;
$button-basic-hover_bg: transparent !default;
$button-basic-hover_border: $global-color_primary !default;

$button-primary_fg: $global-color_white !default;
$button-primary_bg: $global-color_primary !default;
$button-primary_border: $global-color_primary !default;

$button-primary-hover_fg: $global-color_white !default;
$button-primary-hover_bg: $global-color_primaryAlt !default;
$button-primary-hover_border: $global-color_primaryAlt !default;

/* -------------------------------------------------------------- *\
    Icons
\* -------------------------------------------------------------- */

$icon-large_size: 32px !default;
$icon-default_size: 20px !default;
$icon-small_size: 16px !default;

/* -------------------------------------------------------------- *\
    Theme User Photos
\* -------------------------------------------------------------- */

$theme-photo_size: 42px !default;
$theme-photo-small_size: 38px !default;
$theme-photo_round: true !default;
$theme-photo_borderRadius: $global_borderRadius !default;

$theme_stickFooter: true !default;

/* -------------------------------------------------------------- *\
    Links
\* -------------------------------------------------------------- */

$link-body_fontFamily: $global-body_fontFamily !default;
$link-body_fontWeight: $global-normal_fontWeight !default;
$link-body_fontSize: $global-medium_fontSize !default;

$link-heading_fontFamily: $global-body_fontFamily !default;
$link-heading_fontWeight: $global-bold_fontWeight !default;
$link-heading_fontSize: $global-large_fontSize !default;

/* -------------------------------------------------------------- *\
    Layout
\* -------------------------------------------------------------- */

$global-gutter_size: $global_spacer;
$global-gutter_halfSize: $global-gutter_size * 0.5;
$global-gutter_quarterSize: $global-gutter_size * 0.25;

/* -------------------------------------------------------------- *\
    Body
\* -------------------------------------------------------------- */

$body_bg: $global-body_bg !default;
$body_backgroundImage: "" !default;
$body_backgroundRepeat: no-repeat !default;
$body_backgroundSize: cover !default;
$body_backgroundPosition: center center !default;

/* -------------------------------------------------------------- *\
    Frame
\* -------------------------------------------------------------- */

$count_borderRadius: 20px !default;
$frame_bg: transparent !default;
$frame_border: none !default;
$frame_boxShadow: none !default;
$frame_padding: $utility-baseUnitTriple !default;
$frame-mobile_padding: $utility-baseUnitDouble !default;

/* -------------------------------------------------------------- *\
    Header
\* -------------------------------------------------------------- */

$header_minHeight: 48px !default;
$header_bg: $global-color_primary !default;
$header_fg: $global-color_white !default;
$header-link_color: $global-color_white !default;
$header-link-hover_color: $global-color_white !default;
$header_border: 0 !default;
$header_boxShadow: none !default;

$headerButton_bg: transparent !default;
$headerButton_fg: $header-link_color !default;
$headerButton_borderColor: $header-link_color !default;

$headerButton-hover_bg: mix($header-link_color, $header_bg, 12%) !default;
$headerButton-hover_fg: $header-link_color !default;
$headerButton-hover_borderColor: $header-link_color !default;

$headerMebutton_bg: transparent !default;
$headerMebutton_fg: $header-link_color !default;
$headerMebutton-hover_fg: $header-link_color !default;
$headerMebutton-hover_bg: mix($global-color_fg, $header_bg, 26%) !default;
$headerMebutton-active_bg: mix($headerMebutton_fg, $header_bg, 12%) !default;

$headerMeBoxAlert_fg: $headerMebutton_fg !default;
$headerMeBoxAlert_bg: $global-color_secondary !default;
$headerMeBoxAlert_borderColor: $global-color_secondary !default;

/* -------------------------------------------------------------- *\
    Navigation
\* -------------------------------------------------------------- */

$navigation_bg: $global-color_bg !default;
$navigation_fg: $global-color_fg !default;
$navigation-boxShadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
$navigation-hover_fg: $global-color_primary !default;
$navigation_border: darken($navigation_bg, 8%) !default;
$navigation_borderRadius: $global_borderRadius !default;
$navigation_fontSize: $global-large_fontSize !default;
$navigation_paddingSide: $utility-baseUnitDouble !default;
$navigation_vertical_paddingSide: 0 !default;
$navigation-item_height: 32px !default;
$navigation-item_fontWeight: $global-normal_fontWeight !default;
$navigation-easing-transition: cubic-bezier(0, 1, 0, 1) !default;

$navigationButton_bg: $button-primary_bg !default;
$navigationButton_fg: $button-primary_fg !default;
$navigationButton_border: $button-primary_border !default;

$navigationButton-hover_bg: $button-primary-hover_bg !default;
$navigationButton-hover_fg: $button-primary-hover_fg !default;
$navigationButton-hover_border: $button-primary-hover_border !default;

/* -------------------------------------------------------------- *\
    Mobile Mebox
\* -------------------------------------------------------------- */

$MobileMeBox_bg: mix($global-color_white, $header_bg, 12%) !default;
$MobileMeBox_fg: $header-link_color !default;
$MobileMeBox-hover_fg: $header-link-hover_color !default;

$MobileMeBoxAlert_fg: $MobileMeBox_fg !default;
$MobileMeBoxAlert_bg: $global-color_secondary !default;
$MobileMeBoxAlert_borderColor: $global-color_secondary !default;

/* -------------------------------------------------------------- *\
    Content
\* -------------------------------------------------------------- */

$content_bg: transparent !default;
$content_border: none !default;
$content_padding: 0 !default;
$content_borderRadius: 0 !default;

/* -------------------------------------------------------------- *\
    Panel
\* -------------------------------------------------------------- */

$panel_toLeft: false !default;
$panel_width: 220px !default;
$panel_gap: 40px !default;
$panel_bg: $content_bg !default;
$panel_fg: $global-color_fg !default;
$panel_padding: $content_padding !default;
$panel-border: $content_border !default;
$panel_borderRadius: $content_borderRadius !default;

$panel-item-showIcons: false !default;
$panel-item_spacing: 0 !default;
$panel-item_borderRadius: $global_borderRadius !default;
$panel-item_padding: 5px !default;

$panel-item_bg: transparent !default;
$panel-item_fg: $link-default_color !default;
$panel-item_border: none !default;

$panel-item-hover_bg: transparent !default;
$panel-item-hover_fg: $global-color_primary !default;
$panel-item-hover_border: $panel-item_border !default;

/* -------------------------------------------------------------- *\
    Footer
\* -------------------------------------------------------------- */

$footer_bg: $theme-hover_color !default;
$footer_color: $global-color_fg !default;
$footer-link_color: $global-color_primary !default;
$footer-link-hover_color: $global-color_primaryAlt !default;
$footer-base_fontSize: $global-medium_fontSize !default;
$footer-base_lineHeight: $global-base_lineHeight !default;

/* -------------------------------------------------------------- *\
    Components
\* -------------------------------------------------------------- */

$component-item_spacing: 0 !default;
$component-vertical_padding: 16px !default;
$component-horizontal_padding: 8px !default;
$component-base_padding: #{$component-vertical_padding} #{$component-horizontal_padding} !default;
$component_bg: $content_bg !default;
$component_borderWidth: 1px !default;
$component_lateralBorder: false !default;
$component_borderColor: $theme-border_color !default;
$component_border: #{$theme-border_color} #{$component_borderWidth} solid !default;
$component_boxShadow: none !default;
$component_borderRadius: 0 !default;

$component-header_bg: transparent !default;

$component-base_color: $global-color_fg !default;
$component-base_fontSize: $global-medium_fontSize !default;
$component-base_fontWeight: $global-normal_fontWeight !default;
$component-base_lineHeight: $global-base_lineHeight !default;

$component-title_color: $global-color_fg !default;
$component-title-hover_color: $global-color_primary !default;
$component-title_fontSize: $global-large_fontSize !default;
$component-title_fontWeight: $global-semibold_fontWeight !default;
$component-title_lineHeight: $global-base_lineHeight !default;

$component-meta_color: mix($global-color_bg, $global-color_fg, 12%) !default;
$component-meta-link_color: $component-meta_color !default;
$component-meta-link-hover_color: $theme-heading-hover_color !default;
$component-meta_fontSize: $global-small_fontSize !default;
$component-meta_fontWeight: $global-normal_fontWeight !default;
$component-meta_lineHeight: $global-base_lineHeight !default;

/* -------------------------------------------------------------- *\
    Form Elements
\* -------------------------------------------------------------- */

$formElement_height: $utility-baseUnit * 6;
$formElement_paddingVertical: $utility-baseUnitHalf !default;
$formElement_paddingHorizontal: $utility-baseUnitDouble !default;
$formElement_color: $global-color_black !default;
$formElement_borderColor: lighten($global-color_black, 60%) !default;
$formElement_placeholderColor: $formElement_borderColor !default;
$formElement_border: 1px solid $formElement_borderColor !default;
$formElement_fontSize: $global-medium_fontSize !default;
$formElement_fontWeight: $global-medium_fontSize !default;
$formElement_borderRadius: $global_borderRadius !default;

/* -------------------------------------------------------------- *\
    Form Buttons
\* -------------------------------------------------------------- */

$formButton_bg: $button-primary_bg !default;
$formButton-hover_bg: $button-primary_hover_fg !default;
$formButton_color: $button-primary_fg !default;
$formButton_fontFamily: $global-body_fontFamily !default;
$formButton_fontWeight: $global-normal_fontWeight !default;
$formButton_fontSize: $global-medium_fontSize !default;
$formButton_maxWidth: 360px !default;
$formButton_padding: $utility-baseUnitDouble !default;
$formButton_height: $formElement_height !default;
$formButton_borderRadius: $formElement_borderRadius !default;
$formButton_border: 1px solid !default;

/* -------------------------------------------------------------- *\
    HeroBanner
\* -------------------------------------------------------------- */

$herobanner_height: 370px !default;
$herobanner_bg: #3f3e46 !default;
$herobanner_fg: $global-color_white !default;
$herobanner_dropShadow: 0 0 1px $global-color_fg !default;
$herobanner_bgFilter: 0.75 !default;
$herobanner_fontSize: 48px !default;

/* -------------------------------------------------------------- *\
    Searchbox Featured
\* -------------------------------------------------------------- */

$SearchboxFeaturedBtn_fg: $global-color_white !default;
$SearchboxFeaturedBtn_bg: transparent !default;
$SearchboxFeatured_height: 40px !default;
$SearchboxFeatured_width: 673px !default;
$SearchboxFeatured_border: 1px solid $global-color_white !default;

/* -------------------------------------------------------------- *\
    Breakpoints
\* -------------------------------------------------------------- */

$theme-breakpoint_smallMobile: 350px !default;
$theme-breakpoint_mobile: 410px !default;
$theme-breakpoint_smallTable: 768px !default;
$theme-breakpoint_tablet: 992px !default;

$theme-breakpoint_base: $theme-breakpoint_smallTable !default;
